<template>
  <div>
    <!-- 头部 -->
    <!-- <header-bar></header-bar> -->
    <div class="header">
      <van-row
        class="bacc"
        style="position: fixed;width: 100%;top: 0px;z-index: 10;"
      >
        <van-col span="4" style="overflow: hidden">
          <img class="icon" src="../assets/icon.png" />
        </van-col>
        <van-col span="15">
          <van-search
            class="index_header_search bacc"
            v-model="search"
            shape="round"
            placeholder="请输入搜索关键字"
            maxlength="50"
            @search="onSearch"
          ></van-search>
        </van-col>
        <van-col span="5">
          <div class="searchBtn" @click="onSearch">搜索</div>
        </van-col>
      </van-row>
    </div>

    <!-- 标题栏 -->
    <!-- 模板 -->
    <van-tabs
      v-model="active1"
      style="margin-left: -15px;position: fixed;
            width: 100%;top: 54px;left: 14px;z-index: 10;"
      v-if="yincang"
    >
      <van-tab
        :title="m.name"
        v-for="(m, i) in arr"
        :key="i"
        style="margin: -15px 0;"
      >
      </van-tab>
    </van-tabs>

    <!-- 备用模板 -->
    <van-tabs
      v-model="active1"
      style="margin-left: -15px;position: fixed;
            width: 100%;top: 54px;left: 14px;z-index: 10;"
      v-else
    >
      <van-tab :title="nnn" style="margin: -15px 0;" />
    </van-tabs>

    <!-- 内容模块 -->
    <div v-if="active1 == this.active1" style="margin-top:99px">
      <van-row
        id="list-content"
        style="margin: 101px 0px 45px 0;"
        v-model="active2"
      >
        <div v-for="(itemF, ia) in simg" :key="`${ia}+s`">
          <van-col span="11" custom-class="icons_col" class="con">
            <router-link :to="`/caipuDetails/${itemF.id}`">
              <img :src="itemF.pic" style="width: 101%" />
              <div
                style="font-weight:900;font-size:15px;color:#000;height: 21.6px;overflow: hidden;"
              >
                {{ itemF.name }}
              </div>
            </router-link>
            <div>
              <p class="left">用餐人数:{{ itemF.peoplenum }}</p>
              <div @click="add(ia)">
                <div>
                  <span class="left" style="float: right">{{
                    itemF.classid
                  }}</span>
                </div>
                <!-- 模板 -->
                <van-icon
                  :name="name[ia]"
                  :color="color[ia]"
                  style="float: right"
                ></van-icon>
              </div>
            </div>
          </van-col>
        </div>
      </van-row>
    </div>
    <!-- 底部选项卡 --->
    <xrzp-tabbar></xrzp-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dactive: "caipu",
      active1: 0,
      active2: [],
      count: "",
      data1: "",
      search: "",
      color: [],
      name: [
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
        "like-o",
      ],
      arr: [
        { classid: 363, name: "小吃" },
        { classid: 383, name: "月饼" },
        { classid: 312, name: "海鲜" },
        { classid: 382, name: "粽子" },
      ],
      simg: [],
      httpLoading: false, //设置loading的默认初始值,默认状态是关闭状态，所以设置为false
      yincang: true,
      nnn: "",
    };
  },
  mounted() {
    // 请求数据后在mounted调用
    this.getData(363, (list) => {
      this.simg = list;
    });
  },
  methods: {
    // 点击搜索发送请求
    onSearch() {
      console.log(`搜索关键字:${this.search}....`);
      if (this.search != "") {
        this.yincang = false;
        this.nnn = this.search;
        this.axios
          .get(
            `/jisuapi/search?keyword=${this.search}&appkey=b0e7418fe9bef46dcb47a53374ffbef1`
          )
          .then((result) => {
            this.simg = result.data.result.result.list;
            // console.log(result.data.result.result.list);
            // 修改状态
            // this.$store.commit("Search", result.data.result.list);
          });
      } else {
        this.yincang = true;
        this.nnn = "";
        this.getData(363, (list) => {
          this.simg = list;
        });
      }
    },

    // 调用getData请求数据
    getData(classid, callback) {
      this.axios
        .get(
          `/jisuapi/byclass?classid=${classid}&start=20&num=40&appkey=13e76141171ebe61f22e24477b559988`
        )
        .then((res) => {
          // console.log(res);
          let simg = res.data.result.result.list;
          //用callback把数据返回出去
          callback(simg);
        });
    },
    //ia:下标,代表的是遍历的第几个块
    add(ia) {
      this.simg[ia].classid++;
      this.color[ia] = "red";
      this.name[ia] = this.color[ia] == 0 ? "like-o" : "like";
    },
  },
  // 监听状态
  watch: {
    active1(newval) {
      this.getData(this.arr[newval].classid, (list) => {
        this.simg = list;
        //滚动到顶部
        window.scrollTo(0, 0);
        this.color = [];
        this.name = [
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
          "like-o",
        ];
      });
    },
    search() {
      if (this.search == "") {
        this.yincang = true;
        this.nnn = "";
        this.getData(363, (list) => {
          this.simg = list;
        });
      }
    },
  },
};
</script>
<style scoped>
.con {
  margin: 0 0px 10px 10px;
  border: 2px solid skyblue;
  border-radius: 10px;
  overflow: hidden;
}
.left {
  font-size: 15px;
  font-weight: 400;
  float: left;
  margin: 0 2px;
}
.right {
  float: right;
}
</style>
